<template>
  <div>
    <div style="background:#fff">
      <div style="padding:0 3% 0 3%;">
        <van-row type="flex" class="cellHeight" v-for="(item, $index) in val" :key="$index">
          <!-- 1、楼层列表 默认状态-->
          <van-col span="22" @click="seletVal(item)">
            <div class="equeipmentName">
              <span :class="item.status == 1 ? 'openColor':'closeColor'" style="font-size:18px">{{item.name}}</span>
            </div>
            <div class="xingxi">
              <section class="eqclass"><span class="font-color">设备类别：</span>{{item.specClass}}</section>
              <section class="eqcode"><span class="font-color">设备代码：</span>{{item.code}}</section>
            </div>
          </van-col>
        
          <!-- 2、设备列表 编辑状态-->
          <van-col span="2" style="display:flex">
            <van-checkbox v-model="item.show" icon-size="16px" style="margin-left:13px;margin-top:2px" max="1" @click="selectData(item, $index)"></van-checkbox>
          </van-col>
        </van-row>
      </div>
    </div>
    
    <div style="height:82px"></div>
    <div class="paddi">
      <div style="display: flex;" v-if="edieBtnShow">
        <van-button color="#08395b" :block="true" class="btn" :disabled="!openDisabled" width="50%" @click="openStatus" style="margin-left:3%">{{openclose}}</van-button>
        <div style="width:6px"></div>
        <van-button color="#08395b" :block="true" class="btn" :disabled="editDisabled" width="50%" @click="toEdit" style="margin-right:3%">编辑</van-button>
      </div>

      <van-button color="#08395b" :block="true" class="btn" :to='{path: "/addequipment"}' v-if="addBtnShow">添加设备</van-button>
    </div>
    <!-- 数据为空显示 -->
    <equipment-kong v-if="conentShow"></equipment-kong>
    <van-loading type="spinner" color="#09385B" v-if="loadingShow" style="position:absolute; top:40%; left:46%"/>
  </div>
</template>
<script>
import equipmentKong from "@/views/components/equipmentKong.vue"
export default {
  components:{
    equipmentKong
  },
  data(){
    return{
      arr: [], //选中的列表数组坐标
      openclose:'启用', //启用停用按钮切换
      edieBtnShow: false, // 编辑 添加按钮显示 否
      addBtnShow:true, //添加按钮显示
      loadingShow: true,
      conentShow: false,  //页面为空显示  控制
      navName: localStorage.getItem('navName'), //导航名称
      val: []
    }
  },
  methods:{
    //选中编辑
    toEdit(){
      console.log(123);
      this.$router.push({
        path: '/equipmentPrev',
        query: {isEdit: 'edit'}
      })
    },
    selectData(val, index){
      sessionStorage.setItem("equiomentID", val.id)
      sessionStorage.setItem('equiomentVal', JSON.stringify(val)); //点击的数据存储 sessionStorage
      
      if(!(val.show)){ 
        this.arr.push(index);
      }else{
        this.arr.splice(this.arr.findIndex(item => item === index), 1);
        // this.arr.splice(index, 1);
      }
       if(this.arr.length > 0){this.checkedStatus(this.arr[0]) } //启用 还是 停用
      if(this.arr.length >= 1){
        this.edieBtnShow = true; //启用 编辑 按钮显示
        this.addBtnShow = false; //添加 按钮 隐藏
        
        if(this.arr.length == 1){ //编辑按钮 选长度 等于 1  启用
          this.editDisabled = false;
        }else{
          this.editDisabled = true;
        }
      }else if(this.arr.length==0){
        this.edieBtnShow = false; //启用 编辑 按钮隐藏
        this.addBtnShow = true; //添加按 钮显示
       
      }
    },
    //启用\停用
    openStatus(){
      this.$dialog.confirm({
        title: '提示信息',
        message: `确定要${this.openclose}该设备吗？`
      }).then(() => {
        //多条数据启用 停用 循环调接口
        this.arr.forEach(el =>{
          this.OpenandClose(this.val[el].id, this.val[el].status);
        });
        this.arr = [];
      }).catch(() => {
      // on cancel
      });
    },
    //启用编辑接口
    OpenandClose(equipmentID, StatusVal){
      let data = {
        id: parseInt(equipmentID),
        status: parseInt(StatusVal) == 1 ? 2 : 1,
      } 
      this.$http.put("/api/equipments/status", data, {
        headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
          if(res.data.errcode == 0){
            // this.$router.go(0);
            this.getequipmentList();
            this.$toast.success('操作成功！');
            this.edieBtnShow = false; //确认完操作 隐藏 操作栏
            this.addBtnShow = true; //添加按钮显示
          }else{
            this.$toast.fail('操作失败！');
          }
      })
    },
    // 判断按钮 显示文字
    checkedStatus(index){
      //判断按钮显示文字
      if(this.val[index].status==2){
        this.openclose="启用";
      }else{
        this.openclose="停用";
      }
      let arr2 = [];
      this.arr.forEach(el =>{
        this.val[el].status
        arr2.push(this.val[el].status);
      });
      this.openDisabled = this.isAllEqual(arr2);
      // this.isAllEqual(arr2)
    },
    //判断数组是否重复
    isAllEqual(array) {
      if (array.length > 0) {
        return !array.some(function(value, index) {
          return value !== array[0];
        });
      } else {
        return true;
      }
    },
    //获取设备列表数据
    getequipmentList(){
      let ProID = sessionStorage.getItem('ProID');
      let buildID = sessionStorage.getItem('buildID');
      let floorID = sessionStorage.getItem('floorID');
      let spacesID = sessionStorage.getItem('spacesID');
      this.$http.get(`/api/equipments/getEquipmentsList?limit=999&page=1&locationId=${ProID}&buildingId=${buildID}&floorId=${floorID}&spaceId=${spacesID}`,{
        headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == 0){
          if(res.data.data.list.length==0){
           this.loadingShow = false;
            setInterval(res =>{
              this.conentShow = true;
            },1500);
          }else{
            this.loadingShow = false;
            this.conentShow = false;
            this.val = res.data.data.list;
          }
        }
      })
    },
    //选择的内容
    seletVal(val){ 
      sessionStorage.setItem("equiomentID", val.id)
      sessionStorage.setItem('equiomentVal', JSON.stringify(val)); //点击的数据存储 sessionStorage
      this.$router.push({path: '/equipmentPrev'})
    },
    // 返回上一层
    cancel(){
      this.$router.push({path: '/spaces'});//返回上一层
    }
  },
  created(){
    this.getequipmentList();
  },
}
</script>

<style scoped>
.paddi{
  background: #fff;
  padding: 2% 0;
  position:fixed;
  left:0;
  bottom:0%;
  width: 100%;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  /* margin: 0 auto; */
}
  .btn{
    font-size: 32px;
    width:94%; 
    margin:11px auto; 
    border-radius:8px;
  }
  .cellHeight{
    border-bottom:1px solid #EDEDED;
    color:#474747;
    height:120px
  }
  .equeipmentName{
    height:55px;
    /* border: 1px solid  yellow; */
    line-height: 55px;
    font-size: 34px;
  }
  .xingxi{
    height:55px;
    font-size: 26px;
    line-height: 55px;
    display: flex;
  }
  .eqclass{
    width: 50%;
    /* background: yellow; */
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .eqcode{
    width: 50%;
    /* background: blueviolet; */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .font-color{
    color:#7E888A;
  }
  .openColor{
    color: #08395A;
  }
</style>